<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .grid-content {
            border-radius: 4px;
            min-height: 40px;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析<small>运营数据</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>运营数据</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box" style="height: 900px">
            <div class="excelTitle" >
                <el-button @click="exportExcel">导出Excel</el-button>
                会员数量统计
            </div>

            <div style="text-align:center">
                <el-input placeholder="2020-04-15" v-model="beginQueryDate" style="width: 200px;" class="text"></el-input>
                至
                <el-input placeholder="2020-04-15" v-model="endQueryDate"  style="width: 200px;" class="text"></el-input>
                <el-button @click="findMemberByDate()" class="dalfBut">查询</el-button>
            </div>

            <div class="excelTime">日期：{{reportData.reportDate}}</div>
            <table class="exceTable" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="5" class="headBody">会员数据统计</td>
                </tr>
                <tr>
                    <td width='20%' class="tabletrBg">指定时间段会员个数</td>
                    <td width='30%'>{{MemberCount.Date2DateMember}}</td>
                    <td width='20%' class="tabletrBg">指定日期</td>
                    <td width='30%'>{{MemberCount.Date2Date}}</td>
                </tr>
                <tr>
                    <td width='20%' class="tabletrBg">新增会员数</td>
                    <td width='30%'>{{reportData.todayNewMember}}</td>
                    <td width='20%' class="tabletrBg">总会员数</td>
                    <td width='30%'>{{reportData.totalMember}}</td>
                </tr>
                <tr>
                    <td class="tabletrBg">本周新增会员数</td>
                    <td>{{reportData.thisWeekNewMember}}</td>
                    <td class="tabletrBg">本月新增会员数</td>
                    <td>{{reportData.thisMonthNewMember}}</td>
                </tr>

            </table>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/element-ui/lib/index.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/echarts/echarts.js"></script>
<script>
   var vue = new Vue({
        el: '#app',
        data:{
            beginQueryDate:null,
            endQueryDate:null,
            MemberCount:{
                Date2Date:"",//开始日期到结束日期
                Date2DateMember:0//相关时间段内的会员数量
            },
            reportData:{
                reportDate:null, //报表日期
                // 会员相关数据
                todayNewMember :0, //今日新增会员数
                totalMember :0, //总会员数
                thisWeekNewMember :0, //本周新增会员数
                thisMonthNewMember :0 //本月新增会员数

            }
        },
        created() {
            axios.get("http://localhost:8083/report/getBusinessReportData.do").then((res)=>{
                this.reportData = res.data.data;
            });
        },
         methods: {
             exportExcel() {
                 var beginDate = this.beginQueryDate;
                 var endDate = this.endQueryDate;
                 if (beginDate!=null&&endDate!=null){
                     window.location.href = "http://localhost:8083/member/getExcel.do?beginQueryDate="+beginDate+"&endQueryDate="+endDate;
                 }else {
                     alert("日期格式错误,请重新输入正确的日期格式")
                 }

             },
             findMemberByDate(){
                 var beginDate = this.beginQueryDate;
                 var endDate = this.endQueryDate;
                 axios.post("http://localhost:8083/member/findMemberByDate.do?beginQueryDate="+beginDate+"&endQueryDate="+endDate).
                 then(res=>{
                     if (res.data.flag){
                         this.MemberCount.Date2DateMember=(res.data.data)
                         this.MemberCount.Date2Date = beginDate+"至"+endDate;
                     } else {
                         this.$message.error(res.data.message);
                     }
                 }).
                 catch(error=>{

                 });
             }
         }
    })
</script>
</html>
